Mukam

Limitless Multipurpose Responsive Template

by: Blicca Themes
email: help@bliccathemes.com

Thank you for purchasing our theme. If you have any questions, please contact us via support forums. Our support team will be grateful to make you happy with our product. http://wahabali.ticksy.com

Please test your web site on server, you may have problem on local.

Using demo content instead of starting from scratch prevents you make minor mistake if you are not experienced html / css / javascript.

Please read all instructions and look our demo content code.

Don't update javascript library, please wait our updates.

Our template is based on Twitter Bootstrap 3. http://getbootstrap.com/

You can check Twitter Bootstrap web page to learn more details.

There are a few minor difference between our template structure and twitter bootstrap 3.

Twitter Bootstrap 3

<div class="container">
        <div class="row">
               <div class="col-md-9">
                      <p>Your Content</p>
               </div>
               <div class="col-md-3">
                      <p>Your Content</p>
               </div>
         </div>
</div>

We have added an extra div for padding and background. First class bg-color must be above all divs, second class is pre-defined background color. You can change it:

asset-bg, white, greyshop, grey, greypricing, black, blackgrey, darkgrey, greyclient

asset-bg: It depends on which color css is added to header.

Mukam Structure

<div class="bg-color grey">

<div class="container">
        <div class="row">
               <div class="col-md-9">
                      <p>Your Content</p>
               </div>
               <div class="col-md-3">
                      <p>Your Content</p>
               </div>
         </div>
</div>

</div>

Our index.html file css list:

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="layerslider/css/layerslider.css" type="text/css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/yummi-loader.css">

If you want to use pre-defined color layout, you should add [color].css after main.css line.

Our pre-defined color css:

green.css, light-brown.css, light-yellow.css, orange.css, purple.css, red.css, yellow.css

Example:

...
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/red.css">
...

Custom CSS

If you want to add your custom css code, please don't edit our files. Create a new css file and add your own css after all css file that we provide with the template. You can create your own color scheme. Just copy all codes from one of color.css and change color.

There are two sections to add Javascript files to HTML.

Modernizr, JQuery and Layer Slider files should be between <head></head> tags.

Other javascript libraries and our custom javascript file is located before </body> tags. You can check our javascript codes in main.js

If you want to add custom js code, please create custom.js and add it after main.js.

Please look Source & Credits for more details about Javascript Libraries.

We are using Font Awesome, Icomoon and Custom Icons.

Font Awesome: http://fortawesome.github.io/Font-Awesome/

Icomoon: http://icomoon.io/#preview-free

Custom Icons: Please check our html / css for codes and preview.

We are using Layer Slider, Flex Slider and carouFredSel. We have added Layer Slider documentation in documentation folder. Flex Slider and carouFredSel are easy to use. Please check your website and look our demo content file.

carouFredSel: http://caroufredsel.dev7studios.com/

Flex Slider: http://www.woothemes.com/flexslider/

We are using Pretty Photo for thumbnails.

prettyPhoto is a jQuery lightbox clone. It supports images, videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox. Please check prettyPhoto Website.

We are also using prettyPhoto with our hover effects. Sample code:

<div class="widget-thumb">
       <img src="content/portfolio/8.jpg" alt="work">
        <span class="overthumb"></span>
                <div class="carousel-icon">
                            <a href="content/portfolio/8.jpg" data-rel="prettyPhoto" class="prettyPhoto lightzoom">
                            <i class="mukam-search"></i>
                            </a>
                            <a href="#" class="postlink">
                            <i class="mukam-link"></i>
                            </a>
                </div>
</div>

Second line is image href and 5. line is prettyPhoto link that added to "zoom" icon. In addition, there is icon which goes to article or any page.

We are using Masonry for Portfolio Page and Blog Page. http://masonry.desandro.com/

Masonry does not contain filtering option and we have written custom code for this.

Using masonry is not easy but we will explain this with an example. You can also learn masonry in http://masonry.desandro.com/

Example of Portfolio Classic (portfolio-classic.html)

Javascript

First line is filter div name, please check class names in html.
You need to add your item selector which is contain all single content.
Grid sizer is column width, you can check it in main.css file. If you want to responsive page and to give your div percentage value, you have to use grid-sizer.

jQuery(function(jQuery) {
    var nav=jQuery('.portfolio-style-1-filter');
    var container=jQuery('.portfolio-3-wrapper');
    container.masonry({
    isAnimated: true,
    itemSelector:'.portfolio-item-3:not(.hidden)',
    columnWidth: '.grid-sizer',
    gutter: 30,
});
    container.masonry();
 // Filter for Portfolio
    jQuery('.portfolio-style-1-filter a').click(function(e){
        var menuactive = jQuery(this).attr('href');
        var category = jQuery(this).attr('href').replace('#','');
        nav.find('li').removeClass('active'); /* Portfolio menu remove active */
        nav.find('li.slug-'+category).addClass('active');
        container.find('.portfolio-item-3').removeClass('hidden'); 
        container.find('.portfolio-item-3:not(.'+category+')').addClass('hidden');
        container.masonry({
        isAnimated: true,
        itemSelector:'.portfolio-item-3:not(.hidden)',
        columnWidth: '.grid-sizer',
        });

        container.masonry();
        container.find('.'+category).show(500);
        container.find('.portfolio-item-3:not(.'+category+')').hide(500);
        location.hash = category;
        e.preventDefault(); 
    });

    if(location.hash!=''){
        jQuery('a[href="'+location.hash+'"]').trigger('click');
    }
});

HTML

Filtering is easy to use. Just create a listing menu and add right class.

Example:

- Content: <article class="portfolio-item-3 web-design">

First class (portfolio-item-3) contain property of div. Second class (web-design) is filtering class.

- Menu: <a href="#web-design"><li class="slug-web-design"><span>/</span>Web Design</li></a>

"href" and article class should be same, you need to add # beginning your class name in href.

You have to so add filter name to li but instead of #, you have to add "slug-" beginning your class name. You can write what you want between <li> tags.

<div class="bg-color">
<div class="container">
  <div class="row">
     <div class="col-md-12 portfolio-wrapper">
        <div class="portfolio-style-3">
           <div class="portfolio-style-1-filter">
           <ul>
               <a href="#portfolio-item-3"><li class="slug-portfolio-item-3 active">All</li></a>
               <a href="#web-design"><li class="slug-web-design"><span>/</span>Web Design</li></a>
               <a href="#photography"><li class="slug-photography"><span>/</span>Photography</li></a>
               <a href="#print-media"><li class="slug-print-media"><span>/</span>Print Media</li></a>
               <a href="#videos"><li class="slug-videos"><span>/</span>Videos</li></a>
           </ul>
        </div>
<div class="clearfix"></div>
<div class="portfolio-3-wrapper">
       <div class="grid-sizer"></div>
<!-- Start to write each article -->
       <article class="portfolio-item-3 web-design">
          <div class="portfolio-thumbnail">
          <img src="content/portfolio/9.jpg">
          <span class="overthumb"></span>
          <div class="carousel-icon">
              <a href="content/portfolio/9.jpg" data-rel="prettyPhoto" class="prettyPhoto lightzoom"><i class="mukam-search"></i></a>
              <a href="#" class="postlink"><i class="mukam-link"></i></a>
          </div>
          </div>
                     <div class="portfolio-content">
                     <h4 class="portfolio-title">Multiple Images</h4>
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit odio, gravida pellentesque.</p>
                     </div>
                    <div class="clearfix"></div>
                    </article>
....

There are two sections to that you have to edit in contact.php

Go to line 51 and change e-mail section:

$emailTo = 'yourname@yourdomain.com';

In line 336:

<div class="col-md-4 antispam">
 <input type="url" class="form-control" name="url" id="inputUrl" placeholder="Url">
</div>

Don't edit and delete this div. This is a simple protection for spam.

There are two different animations in our template.

1. Yummi Loader - http://gummibearlab.github.io/Yummi-loader/

This is a simple fade effect while opening and navigating your page. Use them just adding 'off' class on your body element then you need to add fadein scaleInv anim_1 to div class.

Example:

<body class="off">
<div class="content fadein scaleInv anim_1"> <p> Your Content </p> </div>
<div class="menu fadein scaleInv anim_2"> <p> Your Content </p> </div>
<div class="slider fadein scaleInv anim_3"> <p> Your Content </p> </div>
</body>

While your web site is loading, div which has class name "anim_1" appear first, "anim_2" appear second....

<a class="trigger" href="index.html">HOMEPAGE 1</a>

If you add a link "trigger" class, your animation works reverse. "anim_3" disappear first...

You can check animation in our demo web page.

2. Element Animation

We are using animate.css with waypoint in our template. Animations appear when browser scroll down to element.

Example:

<div class="your-class">
   <p>Your Content</p>
</div>

Adding animation:

<div class="bounceInLeft-1 blind your-class animated">
      <p>Your Content</p>
</div>

Class name order is important. If your div or H1, H2, p tags does not have class, just add again bounceInLeft-1 blind animated.

List of animations:

tadab-1,
flipInX-1,
flipInY-1,
fadeIn-1,
fadeInUp-1,
fadeInDown-1,
fadeInLeft-1 ,
fadeInRight-1,
fadeInLeftBig-1,
fadeInRightBig-1,
fadeInUpBig-1,
fadeInDownBig-1,
bounceIn-1,
bounceInDown-1,
bounceInLeft-1,
rotateInDownLeft-1,
bounceInRight-1,
rotateInDownLeft-1,
rotateInDownRight-1,
rotateInUpLeft-1,
rotateInUpRight-1,
lightSpeedIn-1,
rollIn-1,
blogeffect4-1,
blogeffect5-1,
blogeffect6-1

We have used stellar.js for parallax backgrounds. http://markdalgleish.com/projects/stellar.js/

Create a div with high resolution background in css and add div data-stellar-background-ratio="0".

Example:

<div class="yourbackground" data-stellar-background-ratio="0">
<p>Your Content </p>
</div>

Check plugin website and our html/css code.

Fonts:

Google Fonts: http://www.google.com/webfonts

Font Awesome: http://fortawesome.github.io/Font-Awesome/

Icomoon: http://icomoon.io/#preview-free

Scripts:

jQuery: http://www.jquery.com/

Modernizr: http://modernizr.com/

Bootstrap Framework: http://getbootstrap.com/

Layer Slider: http://codecanyon.net/item/layerslider-responsive-jquery-slider-plugin/922100

Masonry: http://masonry.desandro.com/

Jquery Validate: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Flex Slider: http://www.woothemes.com/flexslider/

PrettyPhoto: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

carouFredSel: http://caroufredsel.dev7studios.com/

FitText.js: http://daverupert.com

QueryLoader: http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/

jQuery Raty: wbotelhos.com/raty

Stellar.js - http://markdalgleish.com/projects/stellar.js

jQuery Waypoints: https://github.com/imakewebthings/jquery-waypoints

AnythingZoomer: https://github.com/CSS-Tricks/AnythingZoomer

Animation:

Yummi Loader: https://github.com/Gummibearlab/Yummi-loader

animate.css: https://daneden.me/animate/

Mukam

Limitless Multipurpose Responsive Template

Advice

HTML Structure

Twitter Bootstrap 3

Mukam Structure

CSS Structure and Color

Example:

Custom CSS

Javascript

Icons

Sliders

Masonry Pages

Example of Portfolio Classic (portfolio-classic.html)

HTML

contact.php

Animations

Parallax Background

Source & Credits

Fonts:

Scripts:

Animation:

Mukam

Limitless Multipurpose Responsive Template

Advice

HTML Structure

Twitter Bootstrap 3

Mukam Structure

CSS Structure and Color

Example:

Custom CSS

Javascript

Icons

Sliders

Lightbox

Masonry Pages

Example of Portfolio Classic (portfolio-classic.html)

HTML

contact.php

Animations

Parallax Background

Source & Credits

Fonts:

Scripts:

Animation: